<template>
  <div class="tag">
    <BreadCrumb>
      <template v-slot:first>首页</template>
      <template v-slot:second>类型</template>
      <template v-slot:third>类型</template>
    </BreadCrumb>
    <div class="tag_main">
      <div class="tag_list">
        <ul>
          <li
            v-for="item in types"
            :key="item.id"
            @click="toType(item.id, item.name)"
          >
            <span>#</span>
            <span
              ><i>{{ item.name }}</i></span
            >
            <span>{{ item.count }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import { useRouter } from 'vue-router'
  import { queryTypeListRequest } from '@/network/api/type'
  import BreadCrumb from '@/components/BreadCrumb.vue'

  const router = useRouter()
  const types = ref([])
  onBeforeMount(async () => {
    const result = await queryTypeListRequest()
    types.value = result.result
  })
  const toType = (id, name) => {
    router.push({
      path: `/type/${id}`,
      query: {
        name,
      },
    })
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .tag {
      width: 100%;
      .tag_main {
        padding: 59px 44px;
        background: var(--background-secondary);
        border-radius: 16px;
        .tag_list {
          ul {
            display: flex;
            li {
              background-color: var(--background-primary);
              display: flex;
              padding: 12px 10px;
              border-radius: 10px;
              margin: 0 8px;
              cursor: pointer;
              span {
                font-size: 18px;
                &:nth-of-type(2) {
                  color: var(--text-bright);
                  margin-right: 15px;
                  margin-left: 2px;
                }
                &:nth-of-type(3) {
                  color: var(--text-sub-accent);
                }
              }
            }
          }
        }
      }
    }
  }
  @media only screen and (max-width: 990px) {
    .tag {
      width: 100%;
      .tag_main {
        padding: 25px 18px;
        background: var(--background-secondary);
        border-radius: 16px;
        .tag_list {
          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              background-color: var(--background-primary);
              display: flex;
              padding: 12px 10px;
              border-radius: 10px;
              margin: 6px 8px;
              cursor: pointer;
              span {
                font-size: 18px;
                &:nth-of-type(2) {
                  color: var(--text-bright);
                  margin-right: 15px;
                  margin-left: 2px;
                }
                &:nth-of-type(3) {
                  color: var(--text-sub-accent);
                }
              }
            }
          }
        }
      }
    }
  }
</style>
